<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button type="primary" @click="addClientFn">添加客户</el-button>
        <el-select v-model="clientList.agent" placeholder="请选择经纪人">
          <el-option :label="null" :value="null" />
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >{{ item.name }}</el-option>
        </el-select>
        <el-input
          v-model="clientList.name_contains"
          placeholder="请输入关键字进行筛选"
        />

        <el-button type="primary" @click="filterFn">筛选</el-button>
      </div>
      <!-- <div v-for="o in 4" :key="o" class="text item">
        {{ '列表内容 ' + o }}
      </div> -->
      <el-table :data="tableData" border max-height="600" style="width: 100%">
        <el-table-column label="头像" prop="image" width="180">
          <template v-slot="{ row }">
            <img :src="row.image" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="80" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="phone" label="电话" />
        <el-table-column prop="agent.name" label="经纪人" width="100" />
        <el-table-column prop="wechat" label="微信" width="120" />
        <el-table-column prop="desc" label="介绍" width="180" />
        <el-table-column width="180" label="操作">
          <template v-slot="{ row }">
            <el-button
              v-if="assignPerm('edit-but')"
              type="primary"
              @click="editClient(row.id)"
            >编辑</el-button>
            <el-button
              v-if="assignPerm('dele-but')"
              type="primary"
              @click="delClient(row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="currentPage4"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <el-dialog :title="showdialog" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
          <el-input v-model="form.email" autocomplete="off" />
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth" prop="phone">
          <el-input v-model="form.phone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="头像" prop="image">
          <uploadImage ref="uploadImage" />
        </el-form-item>
        <el-form-item label="经纪人" :label-width="formLabelWidth" prop="agent">
          <el-select v-model="form.agent" placeholder="请选择经纪人">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >{{ item.name }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="微信" :label-width="formLabelWidth" prop="wechat">
          <el-input v-model="form.wechat" autocomplete="off" />
        </el-form-item>
        <el-form-item label="介绍" :label-width="formLabelWidth" prop="desc">
          <el-input v-model="form.desc" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelFn">取 消</el-button>
        <el-button type="primary" @click="confirmFn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import uploadImage from '@/components/lmageUpload'
import {
  getClientList,
  addClient,
  editClient,
  getClientInfoById,
  delClientById,
  getClientCount
} from '@/api/client'
import { managerList } from '@/api/manager'
export default {
  components: {
    uploadImage
  },
  data() {
    return {
      clientList: {
        _limit: 5,
        _start: 0,
        name_contains: null,
        agent: null
      },
      input: '',
      value: '',
      id: '',
      total: 100,

      showdialog: '',
      form: {
        name: '',
        email: '',
        phone: '',
        agent: '',
        image: '',
        wechat: '',
        desc: ''
      },
      rules: {
        name: [
          {
            required: true,
            message: '必填项',
            trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            message: '必填项',
            trigger: 'blur'
          }
        ],
        wechat: [
          {
            required: true,
            message: '必填项',
            trigger: 'blur'
          }
        ],
        desc: [
          {
            required: true,
            message: '必填项',
            trigger: 'blur'
          }
        ],

        agent: [
          {
            required: true,
            message: '必填项',
            trigger: 'blur'
          }
        ],
        email: [
          {
            required: true,
            message: '必填项',
            trigger: 'blur'
          },
          {
            pattern:
              /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
            trigger: 'blur',
            message: '邮箱格式不正确'
          }
        ]
      },
      formLabelWidth: '20',
      dialogFormVisible: false,
      currentPage4: 1,
      tableData: [],
      options: []
    }
  },
  async created() {
    // 一进页面调用函数
    this.getClientListfn()
    const result = await getClientCount()
    console.log(result)
    this.total = result - 1
    const res = await managerList()
    console.log(res)
    this.options = res
    // console.log(this.$store.state.user.userInfo.id)
  },
  methods: {
    // 过滤
    async filterFn() {
      this.getClientListfn()
      const result2 = await getClientCount({
        agent: this.clientList.agent,
        name_contains: this.clientList.name_contains
      })
      // console.log(result)
      console.log(result2)

      this.total = result2
    },
    // 删除客户
    async delClient(id) {
      this.$confirm('此操作将删除该客户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await delClientById(id)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          if (this.tableData.length === 1) {
            this.clientList._start -= this.clientList._limit
          }
          this.getClientListfn()
          const result = await getClientCount()
          this.total = result - 1
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 编辑客户
    async editClient(id) {
      this.id = id
      this.showdialog = '编辑客户'
      this.dialogFormVisible = true
      const res = await getClientInfoById(id)
      console.log('编辑196', res)
      if (!this.$refs.uploadImage.fileList[0]) {
        console.log(240)
        this.$refs.uploadImage.fileList.push({ url: res.image })
      } else {
        this.$refs.uploadImage.fileList[0].url = res.image
      }
      this.form = res
    },
    // 添加客户
    addClientFn() {
      this.showdialog = '添加客户'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        console.log(this.$refs.uploadImage)
        this.$refs.uploadImage.fileList = []
      })
    },
    // 获取客户列表的函数
    async getClientListfn() {
      const res = await getClientList(this.clientList)
      console.log(res, 256)

      this.tableData = res
    },
    // 页面变更函数
    handleSizeChange(size) {
      // console.log(size)
      this.clientList._limit = size
      this.getClientListfn()
    },
    // 页数变更函数
    handleCurrentChange(page) {
      console.log(page)
      this.clientList._start = (page - 1) * this.clientList._limit + 1
      this.getClientListfn()
    },
    // 确认
    async confirmFn() {
      // console.log(this.$refs.uploadImage)
      await this.$refs.form.validate()
      if (!this.$refs.uploadImage.fileList[0]) {
        return this.$message.error('请上传头像')
      }

      if (this.showdialog === '编辑客户') {
        this.form.image = this.$refs.uploadImage.fileList[0].url
        await editClient(this.id, this.form)
        this.$message.success('编辑客户成功')
        this.cancelFn()
        this.getClientListfn()
      } else {
        this.form.image = this.$refs.uploadImage.fileList[0].url
        await addClient(this.form)
        this.$message.success('新增客户成功')
        this.cancelFn()
        this.getClientListfn()
        const result = await getClientCount()
        this.total = result - 1
      }
    },
    cancelFn() {
      this.dialogFormVisible = false
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style lang='less' scoped>
.clearfix {
  display: flex;
}
img {
  width: 100%;
}
.el-table {
  margin-bottom: 20px;
  overflow: auto;
}
</style>
